<template>
  <div class="content-box">
    <el-row class="content-row-head">
      <span class="content-title">新的对话</span>
    </el-row>
    <el-row class="chat-content-box" >
      <ChatMess v-for="msgObj in msgBox" :key="msgObj" :msg="msgObj.msg" :direation="msgObj.direation"/>
    </el-row>
    <el-row class="chat-input-box">
      <el-col :span="20">
        <el-input v-model="input" size="large" placeholder="请输入你的问题,点击发送提问" />
      </el-col>
      <el-col :span="4">
        <el-button type="primary" size="large" round @click="submitMsg">发送</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script >
import { defineComponent } from 'vue';
import ChatMess from './ChatMess.vue';

export default defineComponent({
  components: {
    ChatMess
  },
  data() {
    return {
      input : null,
      msgBox : [
        { direation: 0, msg: 'Hello world'}
      ]
    }
  },
  methods: {
    submitMsg() {
      if (this.input == null || this.input.trim() == '') {
        this.$message.warning("不能发送空消息")
        return
      }
      var humenMsg = { direation : 10, msg: this.input }
      this.msgBox.push(humenMsg)
      this.$api.get(BASE_URL + "/api/v1/chat?prompt=" + this.input).then((response)=>{
        console.log(response)
        var botMsg = { direation : 0, msg: response.data.items }
        this.msgBox.push(botMsg)
      })
      this.input = ''
    }
  },
});
</script>

<style scoped>
  .content-box {
    height: 100%;
    background-color: white;
    border-top-right-radius: 2em;
    border-bottom-right-radius: 2em;
    box-shadow: var(--el-box-shadow-light);
  }
  .content-row-head {
    font-size: 30px;
    font-weight: 800;
    padding-top: 20px;
    padding-left: 40px;
    padding-bottom: 10px;
    padding-right: 20px;
    height: 12%;
    box-shadow: 0px 1px 0px 0px rgba(245, 243, 243, 0.708);
    /* border-bottom: 1px rgb(239, 239, 239) solid; */
  }
  .chat-content-box {
    height: 78%;
    width: 100%;
    display: inline-block;
    overflow-y: scroll;
  }
  .chat-input-box {
    box-shadow: 0px -1px 0px 0px rgba(245, 243, 243, 0.708);
    padding: 20px;
  }
  /**修改全局的滚动条*/
  /**滚动条的宽度*/
  ::-webkit-scrollbar {
    width: 8px; 
  
  }

  ::-webkit-scrollbar-thumb {
    background-color: #eaecf1;
    border-radius: 3px;
  }
</style>